<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="~{ fragment/common::common_head}" />
    <title>EasyBlog - EasyBlog博客</title>
    <style type="text/css">
        a:hover {
            color: #ca0c16 !important;
        }
    </style>
</head>
<body>
<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>

<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
            <!--左边的卡片-->
            <div class="four wide column m-mobile-hide"
                 style="max-width: 315px !important;padding-top: 0 !important;padding-right: 0 !important;">
                <!--用户信息-->
                <div th:replace="~{ fragment/userinfo_sidebar::sidebar_userinfo}"></div>
                <!--最新文章-->
                <div th:replace="~{ fragment/userinfo_sidebar::sidebar_newest_article}"></div>
                <!--分类-->
                <div th:replace="~{ fragment/userinfo_sidebar::sidebar_category}"></div>
                <!--归档-->
                <div th:replace="~{ fragment/userinfo_sidebar::sidebar_archives}"></div>
                <h4 class="ui horizontal divider header m-margin-top-large">联系开发者</h4>
                <div class="ui centered card" style="width: 11em">
                    <img src="../static/images/wechat.jpg" th:src="@{/static/images/wechat.jpg}" alt="" class="ui rounded image">
                </div>
            </div>

            <!--右边博客文章列表-->
            <div class="twelve wide column" style="padding-top: 0 !important;">
                <!--header-->
                <div class="ui top attached segment" style="border: none;border-bottom: #f0f1f2 3px solid;border-radius: unset">
                    <div class="ui middle aligned two column grid">
                        <div class="left aligned column m-mobile-title-width">
                            <h3 class="ui teal header m-inline-block">TA的博客</h3>
                            <div class="ui checked checkbox m-inline-block m-margin-left">
                                <input id="checkbox" type="checkbox" checked th:if="${displayOnlyOriginal=='1'}">
                                <input id="checkbox" type="checkbox" th:if="${displayOnlyOriginal=='0'}">
                                <label>只看原创</label>
                                <a id="display1" style="color: #0a001f" hidden th:href="@{/article/index/{id}(id=${author.getUserId()},articleType=0)}">只看原创</a>
                                <a id="display2" style="color: #0a001f" hidden th:href="@{/article/index/{id}(id=${author.getUserId()})}">查看全部</a>
                            </div>
                        </div>
                        <div class="right aligned column m-mobile-info-width">
                            共 <h2 class="ui orange header m-inline-block m-text-thin"> [[${articlePages.total}]] </h2> 篇
                        </div>
                    </div>
                </div>

                <!--content   分页 每页显示20条数据-->
                <div th:if="${!#lists.isEmpty(articlePages)&&!#lists.isEmpty(articlePages.getList())}"
                     class="ui attached segment" style="border: none;padding: 0">
                    <div th:each="article:${articlePages.getList()}"
                         class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear"
                         style="padding-bottom: 20px !important;padding-top: 10px !important;border-bottom: #f0f1f2 3px solid;">
                        <div class="ui mobile reversed stackable grid">
                            <div class="eleven wide column">
                                <div class="ui stackable  grid">
                                    <div class="two wide column m-mobile-hide" style="max-width: 56px;padding-right: 0 !important;">
                                        <div th:if="${article.getArticleType() eq '0'}" class="ui red mini basic label">
                                            <span>原创</span>
                                        </div>
                                        <div th:if="${article.getArticleType() eq '1'}" class="ui green mini basic label">
                                            <span>转载</span>
                                        </div>
                                        <div th:if="${article.getArticleType() eq '2'}" class="ui blue mini basic label">
                                            <span>翻译</span>
                                        </div>
                                    </div>
                                    <div class="fourteen wide column" style="padding-top: 0 !important;padding-left: 10px !important;">
                                        <a th:href="@{/article/details/{id}(id=${article.getArticleId()})}" th:text="${article.getArticleTopic()}" class="ui m-inline-block m-margin-top-small m-margin-bottom-small m-article-list-title"></a>
                                    </div>
                                </div>
                                <p class="m-column_article_desc"  th:text="${#strings.abbreviate(article.getArticleContent(),200)}"></p>
                                <div class="ui stackable grid">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item m-margin-left">
                                                <div th:if="${article.getArticleType() eq '0'}" class="ui red mini basic label m-mobile-show-only">
                                                    <span>原创</span>
                                                </div>
                                                <div th:if="${article.getArticleType() eq '1'}" class="ui green mini basic label m-mobile-show-only">
                                                    <span>转载</span>
                                                </div>
                                                <div th:if="${article.getArticleType() eq '2'}" class="ui blue mini basic label m-mobile-show-only">
                                                    <span>翻译</span>
                                                </div>
                                            </div>
                                            <div class="item m-margin-left m-mobile-hide">
                                                <img th:src="${author.getUserHeaderImgUrl()}" src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image m-mobile-hide">
                                                <div class="content">
                                                    <a href="#" class="m-comment-font-user" th:text="${author.getUserNickname()}"></a>
                                                </div>
                                            </div>
                                            <div class="item m-margin-left">
                                                <i class="calendar icon"></i>
                                                [[${#dates.format(article.getArticlePublishTime(),'yyyy年MM月dd hh:mm:ss')}]]
                                            </div>
                                            <div class="item m-margin-left">
                                                <i class="eye icon"></i>
                                                [[${article.getArticleClick()}]]
                                            </div>
                                            <div class="item m-margin-left">
                                                <i class="comment alternate icon"></i>
                                                [[${article.getArticleCommentNum()}]]
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="five wide column">
                                <a href="#" target="_blank">
                                    <a  href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin m-mobile-icon-show"
                                        th:text="${article.getArticleCategory()}" style="background: rgba(0,0,0,.3) !important;border-color: rgba(0,0,0,.1) !important;"></a>
                                    <img th:if="${article.getArticleFirstPicture()==null}" src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" alt="" class="ui rounded image m-prev-image-style">
                                    <img th:if="${article.getArticleFirstPicture()!=null}" th:src="@{${article.getArticleFirstPicture()}}" alt="" class="ui rounded image m-prev-image-style">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div th:if="${#lists.isEmpty(articlePages.getList())}" class="ui bottom attached segment"
                     style="border: none !important;">
                    <div class="ui middle aligned two column grid">
                        <div style="color: grey;margin: 10em auto !important;float: left !important;font-size: 16px">
                            没有任何文章
                        </div>
                    </div>
                </div>

                <!--content footer ,每页默认显示15条-->
                <div th:if="${articlePages.getTotal()>15}" class="ui bottom attached segment" style="border-radius: unset;border: none;border-top: #f0f1f2 3px solid;">
                    <div class="ui middle aligned two column grid">
                        <div style="margin: 5px auto;float: left !important;">
                            <div class="ui buttons">
                                <a th:if="${displayOnlyOriginal=='1'}" th:href="@{/article/index/{id}(id=${author.getUserId()},articleType=0,page=${articlePages.getPrePage()})}">
                                    <button class="ui  button" style="background: white !important;font-weight: 100 !important;">
                                        <i class="step backward icon"></i>
                                    </button>
                                </a>
                                <a th:if="${displayOnlyOriginal=='0'}" th:href="@{/article/index/{id}(id=${author.getUserId()},page=${articlePages.getPrePage()})}">
                                    <button class="ui  button" style="background: white !important;font-weight: 100 !important;">
                                        <i class="step backward icon"></i>
                                    </button>
                                </a>
                                <a th:if="${displayOnlyOriginal=='1'}" th:each="pageNo:${articlePages.getNavigatepageNums()}"
                                   th:href="@{/article/index/{id}(id=${author.getUserId()},articleType=0,page=${pageNo})}">
                                    <button class="ui button pages">
                                        [[${pageNo}]]
                                    </button>
                                </a>
                                <a th:if="${displayOnlyOriginal=='0'}" th:each="pageNo:${articlePages.getNavigatepageNums()}"
                                   th:href="@{/article/index/{id}(id=${author.getUserId()},page=${pageNo})}">
                                    <button class="ui button pages">
                                        [[${pageNo}]]
                                    </button>
                                </a>
                                <a th:if="${displayOnlyOriginal=='1'}"
                                   th:href="@{/article/index/{id}(id=${author.getUserId()},articleType=0,page=${articlePages.getNextPage()})}">
                                    <button class="ui  button" style="background: white !important;font-weight: 100 !important;"> <i class="step forward icon"></i>
                                    </button>
                                </a>
                                <a th:if="${displayOnlyOriginal=='0'}"
                                   th:href="@{/article/index/{id}(id=${author.getUserId()},page=${articlePages.getNextPage()})}">
                                    <button class="ui button" style="background: white !important;font-weight: 100 !important;"> <i class="step forward icon"></i>
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{fragment/common :: footbar}"></div>
</body>

<th:block th:replace="~{fragment/common :: common_js}"/>
<script>

    $('.m-article-sidebar-padding:last').css('border-bottom','none');
    $('#msg-btn').click(function () {
        $('.ui.modal').modal('hide');
    });
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    /*
     * 显示分页页码标识
     */
    function showCurrentPageNum() {
        if([[${articlePages eq null}]]) return;
        try{
            let obj = document.getElementsByClassName('pages');
            let page = [[${articlePages.pageNum}]];
            for (let i = 0; i < obj.length; i++) {
                if (obj[i].textContent == page) {
                    $(obj[i]).css("cssText", "background:#ddd !important");
                }
            }
        }catch (e) {
            console.log(e);
        }
    }

    //只看原创按钮是否按下
    try{
        $('#checkbox').click(function () {
            if ($('#checkbox').is(":checked")) {
                window.location.href = $('#display1').attr("href");
            } else {
                window.location.href = $('#display2').attr("href");
            }
        });
    }catch (e) {
        console.log(e);
    }
</script>
</html>